#app {

  .main-container {
    min-height: 100%;
    transition: margin-left .28s;
    margin-left: $sideBarWidth;
    position: relative;
  }

  .sidebar-container {
    transition: width 0.28s;
    width: calc(var(sideBarWidth) - 10px) !important;
    padding-left:10px;
    background-color: $menuBg;
    height: 100%;
    position: fixed;
    font-size: 0px;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;

    // reset element-ui css
    .horizontal-collapse-transition {
      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
    }


    // 隐藏滚动条
    .scrollbar-wrapper {
      overflow-x: hidden !important;
    }

    .el-scrollbar__bar.is-vertical {
      right: 0px;
    }

    .el-scrollbar {
      height: 100%;
    }

    &.has-logo {
      .el-scrollbar {
        height: calc(100% - 86px);
      }
    }

    .is-horizontal {
      display: none;
    }

    a {
      display: inline-block;
      width: 100%;
      overflow: hidden;
    }

    .el-menu-item:focus,.el-menu-item:hover{
      background: $hoverBg !important;
      border-radius: 8px;
      color: #1989fa !important;
    }

    .el-menu{
      /** 清空el-menu自带的右侧边框线条 **/
      border-right: none;


      .el-submenu .el-submenu__title:hover{
        background-color:$menuHover  !important;
      }

 
      /** 一级菜单被选中后的高亮效果 **/
      li.el-submenu.is-active  .el-submenu__title, li.el-menu-item.is-active.submenu-title-noDropdown{
        background:#1989fa !important;
        box-shadow: rgba(24,113,248, 0.2) 0px 10px 10px 0px !important;
        border-radius: 4px !important;
        color:#fff !important;

        /** 一级菜单右侧箭头图标颜色设置  **/
        .el-icon-arrow-down{
          color:#fff !important;
        }

        .el-icon-arrow-down:hover,.el-icon-arrow-down:focus,.svg-icon:hover,.svg-icon:focus, span:hover, span:focus{
            background:none !important;
        }

      }

      /** 统一设置一级和二级菜单的高度 **/
      .el-menu-item, .el-submenu__title{
        height: 45px;
        line-height: 45px;
        margin:0px 0;
        width: $sideBarWidth;
        span:focus{
          background: none !important;
        }
      }

      /** 一级菜单 **/
      .el-submenu__title,  .submenu-title-noDropdown{
        margin-bottom:10px !important;
      }
      /** 一级菜单 展开的时候 **/
      .el-submenu.is-opened  .el-submenu__title{
        margin-bottom:0 !important;
        transition: margin-bottom 0.5s;
      }

     /** 二级级菜单 **/
     .el-menu-item {
      padding:0 20px 0 20px !important;
      display: flex;
      align-items: center;;
      margin-bottom:2px;
    }

    /** 二级级菜单选中后 **/
    .el-menu-item.is-active{
      font-weight: bolder !important;
      background:#EAEBEC !important
    }


    }

    .svg-icon {
      margin-right: 6px;
      width:14px;
      height:14px;
    }

    .sub-el-icon {
      margin-right: 6px;
      margin-left: -2px;
    }

  }



  // mobile responsive
  .mobile {
    .main-container {
      margin-left: 0px;
    }

    .sidebar-container {
      transition: transform .28s;
      width: $sideBarWidth !important;
    }

    &.hideSidebar {
      .sidebar-container {
        pointer-events: none;
        transition-duration: 0.3s;
        transform: translate3d(-$sideBarWidth, 0, 0);
      }
    }
  }

  .withoutAnimation {

    .main-container,
    .sidebar-container {
      transition: none;
    }
  }
}

// when menu collapsed
.el-menu--vertical {
  &>.el-menu {

    .svg-icon {
      margin-right: 16px;
    }
    .sub-el-icon {
      margin-right: 12px;
      margin-left: -2px;
    }
  }

  .nest-menu .el-submenu>.el-submenu__title,
  .el-menu-item {

    &:hover {
      // you can use $subMenuHover
      background-color: $menuHover !important;
    }
  }

  // the scroll bar appears when the subMenu is too long
  >.el-menu--popup {
    max-height: 100vh;
    overflow-y: auto;

    &::-webkit-scrollbar-track-piece {
      background: #d3dce6;
    }

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #99a9bf;
      border-radius: 20px;
    }
  }
}
